.borderTopLeft(@radius:5px){
  -moz-border-top-left-radius: @radius;
  -webkit-border-top-left-radius: @radius;
  border-top-left-radius: @radius;
}
.borderTopRight(@radius:5px){
  -moz-border-top-right-radius: @radius;
  -webkit-border-top-right-radius: @radius;
  border-top-right-radius: @radius;
}
.borderBottomLeft(@radius:5px){
  -moz-border-bottom-left-radius: @radius;
  -webkit-border-bottom-left-radius: @radius;
  border-bottom-left-radius: @radius;
}
.borderBottomRight(@radius:5px){
  -moz-border-bottom-right-radius: @radius;
  -webkit-border-bottom-right-radius: @radius;
  border-bottom-right-radius: @radius;
}

.radius(@radius:5px){
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.padding(@padding:@padding)
{
    padding: @padding;
}

.box-shadow(@shadow:@light-gray-shadow)
{
    box-shadow: @shadow;
}

#image-size(@size)
{
    background-size: @size @size;
    width:@size;
    height:@size;
}

.display-inline-box()
{
  display:-webkit-inline-box;
}

.display-box()
{
  display:-webkit-box;
}

.inline-flex-box()
{
  display:-webkit-inline-box;
  display:-webkit-inline-flex;
  display:inline-flex;
}

.flex-box()
{
  display:-webkit-box;
  display:-webkit-flex;
  display: -ms-flex;
  display: flex;
}
.flex-wrap(@wrap)
{
  -webkit-flex-wrap:@wrap;
  flex-wrap:@wrap;
}

.flex(@grow, @shrink, @basis)
{
  -webkit-box-flex:1;
  -webkit-flex:@grow @shrink @basis;
  flex:@grow @shrink @basis;
}

.shrink(@shrink)
{
  -webkit-flex-shrink:@shrink;
  flex-shrink:@shrink;
}

.ordinal(@ordinal)
{
  -webkit-box-ordinal-group:@ordinal; /* Safari and Chrome */
  box-ordinal-group:@ordinal;
  order:@ordinal - 1;
  -webkit-order:@ordinal - 1;
}

.box-pack(@pack)
{
  //-webkit-box-pack: @pack;
  -webkit-box-pack: @pack;
}

.box-align(@align)
{
  -webkit-box-align: @align;
  -webkit-align-items: @align;
  align-items: @align;
}

.align-self(@align)
{
  -webkit-align-self: @align;
  align-self: @align;
}

.align-content(@align)
{
  -webkit-align-content: @align;
  align-content: @align;
}

.justify-content(@justify-content)
{
  -webkit-justify-content:@justify-content;
  justify-content:@justify-content;
}

.align-content-start()
{
  -webkit-box-align: start;
  .align-content(flex-start);
}

.pack-center()
{
  -webkit-box-pack: center;
  .justify-content(center);
}

.pack-initial()
{
  -webkit-box-pack: initial;
  .justify-content(initial);
}

.box-center()
{
  .pack-center();
  .align-items-center();
}

.pack-start()
{
  -webkit-box-pack: start;
  .justify-content(flex-start);
}

.pack-end()
{
  -webkit-box-pack: end;
  .justify-content(flex-end);
}

.pack-stretch()
{
  .justify-content(stretch);
}

.align-items(@align)
{
  -webkit-align-items:@align;  
  align-items:@align;  
}

.align-self(@align)
{
  -webkit-align-self:@align;  
  align-self:@align;
}

.align-items-initial()
{
  -webkit-box-align: initial;
  .align-items(initial);
}

.align-items-center()
{
  -webkit-box-align: center;
  .align-items(center);
}

.align-items-start()
{
  .box-align(start);
  .align-items(flex-start);
}

.align-items-end()
{
  .align-items(flex-end);
  -webkit-box-align: end;
}

.align-items-stretch()
{
  -webkit-box-align: stretch;
  .align-items(stretch);
}
.align-items-baseline()
{
  -webkit-box-align: baseline;
  .align-items(baseline);
}

.orient-v()
{
  -webkit-box-orient:vertical;
  -webkit-flex-box:column;
  flex-box:column;
}

.orient-v-reverse()
{
  -webkit-box-orient:vertical;
  -webkit-flex-box:column-reverse;
  flex-box:column-reverse;
}

.orient-h()
{
  -webkit-box-orient:horizontal;
  -webkit-flex-box:row;
  flex-box:row;
}

.box-orient(@orient)
{
    /* Firefox */
  // -moz-box-orient:@orient;
  /* Safari and Chrome */
  -webkit-box-orient:@orient;
  /* W3C */
  // box-orient:@orient;
}

.box-flex(@flex:0) when (@flex = 0)
{
  // -moz-box-flex:@flex; /* Firefox */
  -webkit-box-flex:@flex; /* Safari and Chrome */
  // box-flex:@flex;
  -webkit-flex: initial;
  flex: initial;
}

.box-flex(@flex:0) when (@flex > 0)
{
  // -moz-box-flex:@flex; /* Firefox */
  -webkit-box-flex:@flex; /* Safari and Chrome */
  // box-flex:@flex;
  -webkit-flex:@flex;
  flex:@flex;
}

#v-padding-gap(@padding-size:@padding)
{
  >a, >div, >box, >block
  {
    margin-top: @padding-size;
  }

  >:first-child
  {
    margin-top: 0;
  }
}


#h-padding-gap(@padding-size:@padding)
{
  >a, >div, >box, >block, >inline-box
  {
    margin-left: @padding-size;
  }

  >:first-child
  {
    margin-left: 0;
  }
}

.box-layout(@orient:horizontal, @align:stretch, @pack:center)
{
  .box-align(@align);
  .box-pack(@pack);
  .box-orient(@orient);
}

.h-layout()
{
  .box-align(horizontal);
  .orient-h;
}

.v-layout()
{
  .box-align(vertical);
  .orient-v();
}
.3d-border(@color)
{
    border-left-color: lighten(@color, 5%);
    border-top-color: lighten(@color, 5%);
    border-right-color: darken(@color, 10%);
    border-bottom-color: darken(@color, 10%);
}

.apple-list-group()
{
    border:solid 1px @color-gray;
    .orient-v();
    background-clip: border-box;
    #radius(0.6rem);
    overflow: hidden;
    background-color: @color-white;

    >*
    {
      border:none;
      border-top: solid 1px #eee;
    }

    >:first-child
    {
      border-top-color: transparent;
    }
}

.icon-box-outline(@image-size:6rem)
{
    #image-size(@image-size);
    // background-color: @color-lightestgray;
    font-size:@image-size * 0.8; 
    .pack-center();
    .align-items-center();
}

.icon-box(@image-size:6rem)
{
    #image-size(@image-size);
    // background-color: @color-lightestgray;
    font-size:@image-size; 
    .pack-center();
    .align-items-center();
}

.icon-img-box(@image-size:6rem, @icon-factor:0.6)
{
    #image-size(@image-size);
    font-size:@image-size * @icon-factor; 
    .pack-center();
    .align-items-center();
}

.y-scroll-fix-container()
{
  position: relative;
    background-clip: border-box;
  .box-flex(1);
}

.y-scroll-zone()
{
    .box-flex(1);
    overflow-y:auto;
    overflow-x:hidden;
    display: block;
    -webkit-overflow-scrolling: touch;
}

.v-scroll-auto()
{
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling: touch;
}

.y-scroll-fix-zone()
{
  .y-scroll-zone;
  .orient-v();
  .box-flex(1);
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
}
.ring(@radius)
{
    width: @radius*2;
    height: @radius*2;
    // -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    // border-radius: @radius;
}

.gradient(@from, @to)
{
  background: @to;
  background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
}

.wrap()
{
    white-space: normal;
    overflow: hidden;
    word-break:break-all;
}

.nowrap()
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
}

.nowrap-ellipsis()
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
    display: block;
    max-width: 100%;
}

.light-text() { opacity: 0.7; }
.smaller-text()
{
    font-size:0.8em;
}

.circle(@size)
{
  border-radius: @size ;
  width: @size;
  height: @size;
  .box-center();
}

// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-base(@color, @background, @border:@background) {
  color: @color;
  background-color: @background;
  // .3d-border(@border);
  // #radius;

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open .dropdown-toggle& {
    color: @color;
    background-color: darken(@background, 8%);
    .3d-border(darken(@border, 12%));
  }
  &:active,
  &.active,
  .open .dropdown-toggle& {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: @background;
          border-color: @border;
    }
  }

  .badge {
    color: @background;
    background-color: #fff;
  }
}

.button-flat-base(@color, @background, @active-background:@color-active) {
  color: @color;
  background-color: @background;
  border:none;

  &:hover,
  &:focus, &:active{
    color:darken(@color, 10%);
    background-color: @active-background;
  }
  &.checked
  {
    color:@color-active;
  }
}

.btn()
{
    cursor: pointer;
    padding: @padding-xl;
    .orient-h;
    .pack-center();
    .align-items-center();
    position: relative;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 1px solid transparent;

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
      cursor: not-allowed;
      pointer-events: none; // Future-proof disabling of clicks
      opacity:.4;
      .box-shadow(none);
    }

    .button-text
    {
        .orient-h;
        .pack-center();
        .align-items-center();
    }
}

.btn-colorful(@bgcolor, @color)
{
  background-color: @bgcolor;
  color:@color;
  &:hover,
  &:active,
  &:focus {
    background-color: darken(@bgcolor,10%);
  }
}

.btn-highlight()
{
  opacity: 0.9;
  &:hover,
  &:active,
  &:focus {
    opacity: 1;
    background-color: @color-active;
    color:whitesmoke;
  }
}

.btn-size(@font-size, @padding, @icon-btn-adj)
{
    font-size: @font-size;
    padding: @padding;
    // min-width: @font-size + @padding*2;

    &.btn-icon
    {
      padding: @padding - @icon-btn-adj;
      font-size: @font-size + @icon-btn-adj*2;
    }
}

.btn-fixed-size(@font-size, @padding, @height)
{
    font-size: @font-size;
    padding: @padding;
    min-width: @height;
    min-height: @height;

    &.btn-icon
    {
      padding: 0 @padding;
      font-size: @height / 2;
    }
}

.btn-square()
{
    .pack-center();
    .align-items-center();
    .orient-v();

    icon
    {
      .pack-center();
      .align-items-center();
    }
}

.btn-square-size-xxl()
{
  .btn-square-size(9rem, 3.6rem);
}

.btn-square-size-l()
{
  .btn-square-size(6rem, 2.6rem);
  icon { margin-bottom:0;}
}

.btn-square-size(@btn-size, @icon-size, @font-size:@font-size-default )
{
    width: @btn-size;
    height: @btn-size;
    font-size: @font-size;

    icon
    {
      width: @icon-size;
      height: @icon-size;
      background-size: @icon-size @icon-size;
      font-size: @icon-size*0.9;
    }

    .button-text
    {
      margin-top: 0.2em;
    }
}

.rps-padding-xxl()
{
  .padding(@padding-zone) !important;
  @media all and (max-width: @screen-handheld)
  {
    &
    {
      .padding(@padding-xl) !important;
    }
  }
}

.rps-circle-xxxl()
{
  .circle(7rem);
  @media all and (max-width: @screen-handheld)
  {
    & {.circle(5rem);}
  }
}

.rps-font-xxxl()
{
  font-size: @font-size-xxxl;
  @media all and (max-width: @screen-handheld)
  {
    & {font-size: @font-size-xxl;}
  }
}

// Box sizing
.box-sizing(@boxmodel) {
  box-sizing: @boxmodel;
}

.rps-image-gxl()
{
  .icon-box-outline(14rem);
  @media all and (max-width: @screen-stablet-l)
  {
    & {.icon-box-outline(11rem);}
  }
  @media all and (max-width: @screen-handheld)
  {
    & {.icon-box-outline(10rem);}
  }
}

.dialog-width-pad()
{
    width: 1024px;
    height: 768px;
    min-height: 90%;
    .modal-body
    {
      .box-flex(1);
    }
    @media all and (min-width: 1200px)
    {
      & { width: 1200px; }
    }
}

.dialog-with-wide()
{
    width: 1200px;
    height: 800px;
    min-height: 90%;
    .modal-body
    {
      .box-flex(1);
    }
}